<template>
  <div class="body_bgi full pt_50 relative">
    <div class="w_full h_full-100 relative ph_20 flex_column_start gap_10">
      <div 
        class="w_full flex_1 p_10 mb_10 relative" 
        :class="formatBgc(index)"
        v-for="(item, index) in contestList" :key="index"
        @click="goToPage(item)"
      >
        <div class="w_full flex_row_between flex_center fs_1rem">
          <div class="color_fff"></div>
          <div 
            class="ph_5 bgc_0000003a text_center color_e98151 fs_1rem border_radius_5"
            :class="screenWidth < 600 ? 'fs_1rem' : 'fs_2rem'"
            v-if="item.isFinished == 0">{{ formatRoomState(item.isFinished) }}</div>
          <div 
            class="ph_5 bgc_0000003a text_center color_6DC88E fs_1rem border_radius_5" 
            :class="screenWidth < 600 ? 'fs_1rem' : 'fs_2rem'"
            v-if="item.isFinished == 1">{{ formatRoomState(item.isFinished) }}</div>
          <div 
            class="ph_5 bgc_0000003a text_center color_ff2c64 fs_1rem border_radius_5" 
            :class="screenWidth < 600 ? 'fs_1rem' : 'fs_2rem'"
            v-if="item.isFinished == 2">{{ formatRoomState(item.isFinished) }}</div>
        </div>

        <div class="w_full h_60 lh_60 flex_row_center absolute_center">
          <div 
            class="main_text text_right font_zh ls_5"
            :class="screenWidth < 600 ? 'fs_2rem' : 'fs_3rem'"
            >{{ item.name }}
          </div> 
        </div>
        <div 
          class="main_text font_zh text_left pl_5 pt_5 absolute bottom_10 right_20"
          :class="screenWidth < 600 ? 'fs_1rem' : 'fs_2rem'"
          >比赛</div>
      </div>
    </div>

    <div class="w_full h_100 absolute left_0 bottom_0">
      <h5-footer />
    </div>
    
    <Tabbar />
  </div>
</template>

<script>
  import { getContestList } from '@/api/index.js'
  import { Toast } from 'vant';
  import H5Footer from '@/components/Footer.vue'
  import Tabbar from '@/components/tabbar.vue';

  export default {
    name: 'selectActivity',
    components: { H5Footer, Tabbar },
    data() {
      return {
        screenWidth: 0,
        contestList: [],
        timer: null
      }
    },
    mounted() {
      this.screenWidth = document.body.clientWidth, // 屏幕宽

      // 获取 活动列表
      this.getContestList()
    },
    methods: {
      // 获取 活动列表
      async getContestList() {
        let res = await getContestList()
        try {
          if (res.code == 1000) {
            let sortdict = {
              "1": 1,
              "0": 2,
              "2": 3
            }

            this.contestList = res.data.sort((a, b) => sortdict[a.isFinished] - sortdict[b.isFinished])
          }
        } catch(err) {
          console.log('获取活动列表失败 : ', err);
        }
      },

      // 格式化 房间状态
      formatRoomState(val) {
        let result = ''
        if (val == 0) {
          result = '未开始'
        } else if (val == 1) {
          result = '进行中'
        } else {
          result = '已结束'
        }

        return result
      },

      goToPage(item) {
        if (item.isFinished == 0) {
          Toast.fail({
            duration: 2000,
            message: '当前活动未开始！'
          })
          return false
        }

        if (item.isFinished == 2) {
          Toast.fail({
            duration: 2000,
            message: '当前活动已结束！'
          })
          return false
        }

        window.sessionStorage.setItem('roomId', item.id)

        let path = `/person-score/${item.id}/${item.name}`

        this.$router.push(path)
      },

      // 格式化 背景颜色
      formatBgc(val) {
        let bgc = ''
        if (val == 0) {
          bgc = 'bgc_1'
        } else if (val == 1) {
          bgc = 'bgc_2'
        } else if (val == 2) {
          bgc = 'bgc_3'
        } else {
          bgc = ''
        }

        return bgc
      },
    }
  }
</script>

<style>
  .bgc_1 { background-image: url('~@/assets/image/room1.png'); background-size: 100% 100%; }
  .bgc_2 { background-image: url('~@/assets/image/room2.png'); background-size: 100% 100%; }
  .bgc_3 { background-image: url('~@/assets/image/room3.png'); background-size: 100% 100%; }
</style>